<template>
	<view class="home">
		<u-navbar title="我加入的组局" :placeholder="true" bgColor="rgba(0,0,0,0.0)" :autoBack="true">
		</u-navbar>
		<view class="game">
			<view class="game-item" v-for="(item,index) in list" :key="index">
				<view class="item-info">
					<image class="info-img" :src="item.image" mode="aspectFill"></image>
					<view class="info-right">
						<view class="info-title">
							{{item.title}}
						</view>
						<view class="info-text">
							<image class="text-image" src="https://m.lqvvvv.com/images/organize/time.png" mode="">
							</image>
							<view>
								开始时间:{{$u.timeFormat(item.createtime, 'mm月dd日 MM:ss')}}
								<br>结束时间:{{$u.timeFormat(item.endtime, 'mm月dd日 MM:ss')}}
							</view>
						</view>
						<view class="info-text">
							<image class="text-image" src="https://m.lqvvvv.com/images/organize/address.png" mode="">
							</image>
							<view>
								{{item.address}}
							</view>
						</view>
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;">
					<view></view>
					<view class="item-bottom">
						<view class="bottom-btn" @click="goopen(item.id)">
							查看详情
						</view>
						<view class="bottom-btn2" @click="goback(item.id)">
							退出
						</view>
					</view>
				</view>

			</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				list: [],
				status: 'loadmore',
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = ++this.page;
			this.getList()
		},
		methods: {
			goback(id) {
				let app = this
				uni.showModal({
					title: '提示',
					content: '是否退出组局！',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showLoading({
								mask: true
							})
							let params = {
								activity_id: id
							}
							app.$Request({
								method: 'POST',
								url: '/api/user_activity/cancelJoinActivity',
								data: params,
								ismsg: true,
							}).then(res => {
								if (res.code == 1) {
									uni.hideLoading()
									app.page = 1
									app.getList()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			goopen(id) {
				uni.navigateTo({
					url: '/pages/my/organize/details/index?id=' + id
				})
			},
			godetele(id) {
				let app = this
				uni.showModal({
					title: '提示',
					content: '是否删除此组局！',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showLoading({
								mask: true
							})
							let params = {
								activity_id: id
							}
							app.$Request({
								method: 'POST',
								url: '/api/user_activity/delActivity',
								data: params,
								ismsg: true,
							}).then(res => {
								if (res.code == 1) {
									uni.hideLoading()
									app.page = 1
									app.getList()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getList() {
				let params = {
					page: this.page,
					limit: 10,
				}
				this.$Request({
					method: 'POST',
					url: '/api/user_activity/getMyJoinList',
					data: params,
					ismsg: false,
				}).then(res => {
					console.log(res, 1233)
					if (res.code == 1) {
						if (res.data.data.length < 10) {
							this.status = 'nomore';
						}
						if (this.page == 1) {
							this.list = res.data.data
						} else {
							this.list = [...this.list, ...res.data.data]
						}
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F4F7FC;
	}
</style>
<style lang="scss" scoped>
	.home {
		background-image: url('https://m.lqvvvv.com/assets/static/index/nav-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 900rpx;
		min-height: 100vh;
		padding: 20px;

		.game {
			padding-bottom: 30rpx;

			.game-item {
				background-image: url('https://m.lqvvvv.com/assets/static/index/nav-bg.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				padding: 20rpx;
				border-radius: 20px;
				margin-bottom: 20px;
				box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.01);
				position: relative;

				.item-info {
					display: flex;
					align-items: center;
					justify-content: space-around;

					.info-img {
						width: 210rpx;
						height: 210rpx;
						border-radius: 20rpx;
					}

					.info-right {
						margin-left: 20rpx;

						.info-title {
							font-weight: 800;
							font-size: 32rpx;
							color: #000000;
						}

						.info-text {
							display: flex;
							font-weight: 400;
							font-size: 24rpx;
							color: #8B8DA0;
							margin-top: 10rpx;

							.text-image {
								width: 30rpx;
								height: 30rpx;
								margin-right: 10rpx;
							}

							view {
								width: 300rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								-o-text-overflow: ellipsis;
								text-overflow: ellipsis;
								/* 超出部分显示省略号 */
							}

						}
					}
				}

				.item-bottom {
					margin-top: 20rpx;
					display: flex;
					align-items: center;

					.bottom-btn2 {
						margin-left: 20rpx;
						padding: 15rpx 30rpx;
						background-color: #d0d0d0;
						color: #7a7a7a;
						font-weight: 600;
						font-size: 26rpx;
						border-radius: 30rpx;
						text-align: center;
					}

					.bottom-btn {
						padding: 15rpx 30rpx;
						background-color: #ff0000;
						color: #ffffff;
						font-weight: 600;
						font-size: 26rpx;
						border-radius: 30rpx;
						text-align: center;
					}
				}
			}
		}
	}
</style>